import React, { Component } from 'react'
import { connect } from 'dva'
import {Form, Button, Input, Card} from 'antd'
import PageHeaderLayout from '../../layouts/PageHeaderLayout'

@Form.create()
class Add extends Component {

    submitHandler = event => {
        event.preventDefault()
        this.props.form.validateFields((errors, values) => {
            if(!errors) {
                console.log(values)
            }
        })
    }

    render() {
        const {getFieldDecorator} = this.props.form
        const formItemLayout = {
          labelCol: {
            xs: { span: 24 },
            sm: { span: 7 },
          },
          wrapperCol: {
            xs: { span: 24 },
            sm: { span: 12 },
            md: { span: 10 },
          },
        }
        return (
            <PageHeaderLayout title="添加文章"
                content="新建文章">
                <Card bordered={false}>
                    <Form onSubmit={this.submitHandler}>
                        <Form.Item {...formItemLayout}
                            label="标题">
                            {
                                getFieldDecorator('title', {
                                    rules: [
                                        {required: true, message: '必须要有标题！'},
                                        {max: 30, message: '最多30个字。'}
                                    ]
                                })(<Input />)
                            }
                        </Form.Item>
                        <Form.Item {...formItemLayout} label="正文">
                            {
                                getFieldDecorator('content', {
                                    rules: [
                                        {required: true, message: '必须有正文。'},
                                        {min: 8, message: '至少8个字。'}
                                    ]
                                })(<Input.TextArea autosize={{minRows: 12}} />)
                            }
                        </Form.Item>
                        <Form.Item wrapperCol={{span: 8, offset: 7}}>
                            <Button type="primary" size="large" htmlType="submit">保存</Button>
                        </Form.Item>
                    </Form>
                </Card>
            </PageHeaderLayout>
        )
    }
}

export default Add
